<html>
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
     <meta http-Equiv="Cache-Control" Content="no-cache"/>
     <meta name="format-detection" content="telephone=no"/>
     <meta http-Equiv="Pragma" Content="no-cache"/>
     <meta http-Equiv="Expires" Content="0"/>
     <title>Rap Debug</title>
     <style type="text/css">

          body {
               color: white;
               font-size: 12px;
               margin: 0;
               height:100%;
               overflow-y:scroll;
               font-family: 'Open Sans', sans-serif;
               background: #092756;
               background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top,  rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg,  #670d10 0%, #092756 100%);
               background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
               background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
               background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
               background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg,  #670d10 0%,#092756 100%);
               filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );
          }
          html { width: 100%; height:100%; overflow:hidden; }
          * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }

          table {
               width: 100%;
          }

          th {
               text-align: left;
               padding: 10px;
               font-size: 12px;
          }

          td {
               vertical-align: top;
               padding: 10px;
               font-size: 12px;
               word-break: break-all;
          }

          .header{
               line-height: 20px;
               border-bottom: 1px solid #888;
               padding: 10px;
               font-size: 15px;
          }
          .header a{color: white;  float: right;  margin-right: 10px;}
     </style>
</head>
<body>
<div style="border: 1px solid #888;margin: 10px;">
     <div class="header"><span>调试信息</span><a href="logoutAll.html">退出全部</a> <a  href="logout.html">退出当前</a><a href="autoIn" target="_blank">邀请进入</a><a  href="javascript:clear()">清空</a></div>
     <table id="info">

     </table>
</div>

</body>
<script>

     function ajax(url) {
          var xhr;
          if (window.XMLHttpRequest) {
               xhr = new XMLHttpRequest();//W3C
          } else {
               xhr = new ActiveXObject('MicroSoft.XMLHTTP');//IE
          }
          xhr.open('get', url, false);
          xhr.send(null);
          if (xhr.status == 200) {
               return xhr.responseText;
          }
          return "";
     }
     var info = document.getElementById('info');

     function clear() {
          info.innerHTML = "<thead><tr><th width='120px'>类型</th><th >内容</th></tr></thead>";
     }
     clear();
     setInterval(function () {
          var page = location.href;
          var url = page.replace("/page", '/logMsg');
          var content = ajax(url);
          if (!content) {
               return;
          }
          content = JSON.parse(content);
          for (var index in content) {
               var item = content[index];
               var li = document.createElement('tr');
//        <td>" + item.time + "</td><td>" + item.name + "</td><td>
               var tr = "<td width='120px;'>" + item.name+' ('+item.type+')<br/>@'+item.time+ "</td><td><span>" + item.msg + "</span></td>";
               li.innerHTML = tr;
               info.appendChild(li);
          }
     }, 1000)

</script>

</html>